<template>
    <!--  -->
   <div class="excel">
       <el-dialog :visible="showDialog" style="width: 60%; margin: 0 auto" class="dialog" @close="$emit('update:showDialog', false)">
        <el-row type="flex" justify="center">
            <div class="upload-excel">
                <input
                ref="excel-upload-input"
                class="excel-upload-input"
                type="file"
                accept=".xlsx, .xls"
                @change="changeUpload"
                >
                <div class="drop">
                <i class="el-icon-upload" />
                <el-button type="text" @click="upLoad" size="mini">下载导入模板</el-button>
                <span>将文件拖到此处或
                    <el-button type="text" @click="handleUpload">点击上传</el-button>
                </span>
                </div>
            </div>
         </el-row>
            <el-row type="flex" align="middle" justify="end">
                <el-button type="primary" size="mini" @click="cancellation">取消</el-button>
            </el-row>
       </el-dialog>
   </div>
</template>

<script>
import {getTempService, getUploadService} from '@/api/staff'
import { Message } from 'element-ui';
import FileSaver from 'file-saver';
export default {
props: {
    showDialog : {
        type: Boolean,
        default: false
    },
    getStaffList: {
        type: Function
    }
},
methods: {
    // 点击取消按钮
    cancellation() {
        this.$emit('cancellation')
    },
    // 下载导入模板
   async upLoad(){
       const res = await getTempService()
       FileSaver.saveAs(res, '员工导入模板.xlsx')
    //    关闭弹层
       this.cancellation()
    },
    // 点击上传，
    handleUpload(){
        this.$refs['excel-upload-input'].click() //打开文件选择器
    },
   async changeUpload(e){
        // 先拿到input输入框中的files
       const files = e.target.files
      //  如果file的数组长度大于0，说明数组中有文件信息，说明有文件存在，才可以调用上传接口
       if(files.length > 0){
        // 实例化对象formData对象
        const data = new FormData()
        //  使用append方式传参数 file参数名，files[0]参数值
         data.append('file', files[0])
        //  执行成功
        try {
        //  调用上传接口,传参数
         await getUploadService(data)
          // 重新加载数据
          this.getStaffList()
          // 关闭弹层
          this.cancellation()
          Message({type: 'success' , message: '导入成功'})
           // 执行失败
          } catch (error) {
            Message({type: 'warning' , message: error})
          } finally {
          // 清空文件选择器
           this.$refs['excel-upload-input'].value = ''
          }
        }
    },
  }
}
</script>

<style scoped lang="scss">
.upload-demo{
    display: flex;
    flex-direction: column;
}
.el-upload-dragger{
    width: 100% !important;
    border: 0;
}
.upload-excel {
      display: flex;
      justify-content: center;
      margin: 20px;
      width: 360px;
      height: 180px;
      align-items: center;
      color: #697086;
      .excel-upload-input {
        display: none;
        z-index: -9999;
      }
      .btn-upload,
      .drop {
        border: 1px dashed #dcdfe6;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 160px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .drop {
        line-height: 40px;
        color: #bbb;
        i {
          font-size: 60px;
          display: block;
          color: #c0c4cc;
        }
      }
    }
</style>